<template>
  <NSpin :show="spinShow">
    <div class="approve_process_container">
      <!-- 说明文字 -->
      <div
        class="tip_container"
        v-if="hint && hint !== ''"
      >
        <NIcon
          size="20"
          class="tip_icon"
        >
          <ErrorRound />
        </NIcon>
        <div class="tip_text">{{ hint }}</div>
      </div>
      <!-- 审批流程（人） -->
      <div
        class="process_container"
        v-if="!spinShow"
      >
        <div style="display: flex; margin-right: 10rem">
          <NIcon
            :size="20"
            class="process_icon"
          >
            <ApprovalFilled />
          </NIcon>
          <span>审批流程</span>
        </div>
        <span
          style="font-size: 18rem; flex: 1"
          :style="{ color: workFlowList === null ? 'red' : '#79bb92' }"
        >
          {{ workFlowList !== null ? workFlowList : '暂无配置流程，请联系管理员进行配置' }}
        </span>
      </div>
    </div>
  </NSpin>
</template>

<script setup lang="ts">
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NModal,
  NIcon,
  useMessage,
  NSpin,
  NSelect,
  type FormInst
} from 'naive-ui'
import { ref, onMounted, watch } from 'vue'
import { sendRequest } from '@/utils/api'
import { ErrorRound } from '@vicons/material'
import { ApprovalFilled } from '@vicons/material'

const props = defineProps({
  tips: { type: String, required: false, default: () => '' },
  code: { type: String, required: true }
})
const workFlowList = ref<string | null>(null)
const hint = ref(props.tips)
const spinShow = ref(true)
/** 获取工作流 */
const getWorkFlow = async (code: any) => {
  spinShow.value = true
  workFlowList.value = null
  const [error, res] = await sendRequest({
    module: 'receiveOrDispatch',
    api: 'workFlow',
    override: {
      params: {
        functionCode: code
      }
    }
  })
  if (error) {
    spinShow.value = false
    return
  }
  if (res.code !== 0) {
    spinShow.value = false
    return
  }
  hint.value = res.data.remark || ''
  workFlowList.value = res.data.workFlowList?.length
    ? res.data.workFlowList?.map((it: any) => it).join(' → ')
    : null
  spinShow.value = false
}

onMounted(() => {
  getWorkFlow(props.code)
})

watch(
  () => props.code,
  (newValue) => {
    getWorkFlow(newValue)
  }
)
</script>

<style scoped lang="scss">
.approve_process_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .tip_container {
    display: flex;
    margin-bottom: 5px;
    min-width: 360rem;
    max-width: 800rem;
    .tip_icon {
      margin-right: 5rem;
      color: #5fb17f;
    }
    .tip_text {
      white-space: pre-wrap;
    }
  }

  .process_container {
    display: flex;
    align-items: center;
    background-color: #d5e2d8;
    border-radius: 5rem;
    padding: 5px 15px;
    margin-bottom: 10px;
    min-width: 360rem;
    max-width: 800rem;
    min-height: 50rem;
    .process_icon {
      margin-right: 5rem;
      color: #5fb17f;
    }
  }
}
</style>
